<template>
  <div class="app-container">
    <el-card>
      <div slot="header">
        <el-button type="primary" @click="deBounceWrap(handleGetList)">
          刷新
        </el-button>
      </div>
      <el-table :data="menuList" border>
        <el-table-column prop="id" label="ID" width="60px"></el-table-column>
        <el-table-column
          prop="title"
          label="名称"
          width="200px"
        ></el-table-column>
        <el-table-column prop="status" label="状态" width="90px">
          <template slot-scope="{ row }">
            <el-tag type="success" v-if="row.status === 1">已完成</el-tag>
            <el-tag type="warning" v-else>未完成</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="download_url" label="下载链接（点击链接下载）">
          <template slot-scope="{ row }">
            <a :href="row.download_url" target="_blank">{{
              row.download_url
            }}</a>
          </template>
        </el-table-column>
        <el-table-column
          prop="created_at"
          label="预约时间"
          width="200px"
        ></el-table-column>
        <el-table-column
          prop="updated_at"
          label="更新时间"
          width="200px"
        ></el-table-column>
      </el-table>
    </el-card>

    <!-- 分页 -->
    <cus-pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.page_size"
      @pagination="handleGetList"
    />
  </div>
</template>

<script>
import { getLog } from "@/api/order/recharge";

export default {
  data() {
    return {
      listQuery: {
        page: 1,
        page_size: 10
      },
      total: 0,
      menuList: []
    };
  },
  created() {
    this.handleGetList();
  },
  methods: {
    handleGetList() {
      getLog().then(res => {
        this.menuList = res.data.data;
        this.total = res.data.total;
      });
    }
  }
};
</script>

<style></style>
